
<template>
	<div>
		<InputOutputDefine
			:versionId="props.id"
			:stepCode="props.nodeId"
			:topFlag="false"
			:resource="props.frontFile"
			:inputFlag="true"
		>
		</InputOutputDefine>
		<a-row class="mb-2">
			<a-col span="2">
				<a-button type="primary" @click="add">新增</a-button>
			</a-col>
			<a-col span="3"> 默认下一步： </a-col>
			<a-col span="4">
				<a-select
					size="large"
					style="width: 100%"
					v-if="props.componentConfig?.output"
					v-model:value="props.componentConfig.output.defaultNextTransformId"
					placeholder="请选择"
					allowClear
					show-search
				>
					<a-select-option v-for="item in nextTransformsList" :key="item" :label="item" :value="item" />
				</a-select>
			</a-col>
			<a-col span="1"> </a-col>
			<a-col span="2">
				<a-button @click="remove">删除</a-button>
			</a-col>
		</a-row>

		<a-row>
			<a-col span="24">
				<div
					:class="pipe.pipeClassList"
					v-for="(pipe, index) in props.componentConfig?.output?.pipeData"
					:key="pipe.nextTransformId"
					@click="focusPipe(pipe, index)"
				>
					<a-row class="mb-2">
						<a-col span="24" class="mb-2">
							<a-select
								size="large"
								style="width: 100%"
								v-model:value="pipe.nextTransformId"
								placeholder="请选择"
								allowClear
								show-search
							>
								<a-select-option v-for="item in nextTransformsList" :key="item" :label="item" :value="item" />
							</a-select>
						</a-col>
						<a-col span="24">
							<ConditionTable
								:height="200"
								:tableFieldList="inputDefine.params"
								:values="inputDefine"
								:conditionData="pipe.conditionData"
							>
							</ConditionTable>
						</a-col>
					</a-row>
				</div>
			</a-col>
		</a-row>
	</div>
</template>
<script setup>
import { onMounted, ref, watch, toRaw, inject, getCurrentInstance } from 'vue'
import { Message, Radio, Row, Switch } from 'view-ui-plus'
import ConditionTable from './ConditionTable.vue'
import processVersionContentApi from '@/api/process/processVersionContentApi'

const props = defineProps(['componentConfig', 'nodeId', 'id', 'frontFile'])
const defaultConfig = () => {
	return {
		output: {
			defaultNextTransformId: null,
			conditionStr: null,
			pipeClassList: ['pipe'],
			pipeData: []
		}
	}
}

const inputDefine = ref({})

const remove = () => {
	if (!currentPipeIndex) {
		return
	}
	let cb = []
	for (let i = 0; i < props.componentConfig.output.pipeData.length; i++) {
		if (currentPipeIndex == i) {
			continue
		}
		cb.push(props.componentConfig.output.pipeData[i])
	}
	props.componentConfig.output.pipeData = cb
}

let currentPipeIndex = null
const focusPipe = (pipe, index) => {
	currentPipeIndex = index
	for (let c of props.componentConfig.output.pipeData) {
		c.pipeClassList = ['pipe']
	}
	pipe.pipeClassList.push('pipeHover')
}
onMounted(async () => {
	if (!hasProperties(props.componentConfig)) {
		const c = defaultConfig()
		props.componentConfig.output = c.output
	}

	const c = await getInputDefine()
	inputDefine.value = c

	const cb = await getNextTransforms()
	nextTransformsList.value = cb
})

const hasProperties = (obj) => {
	if (!obj) {
		return false
	}

	return JSON.stringify(obj) != '{}'
}

const getInputDefine = async () => {
	//需要调用后端查询接口定义
	const read = await processVersionContentApi.getCurrentInputDefine({
		id: props.id,
		frontFile: props.frontFile,
		stepCode: props.nodeId
	})
	return read
}

const nextTransformsList = ref([])

const getNextTransforms = async () => {
	const cb = await processVersionContentApi.getNextTransforms({
		id: props.id,
		frontFile: props.frontFile,
		stepCode: props.nodeId
	})
	return cb
}

const add = () => {
	props.componentConfig.output.pipeData.push({
		nextTransformId: null,
		pipeClassList: ['pipe'],
		conditionStr: null,
		conditionData: []
	})
}
const beforeSaveProcessor = async () => {
	const pipeData = props.componentConfig?.output?.pipeData
	if (!pipeData) {
		return
	}
	for (const bb of pipeData) {
		const nextTransformId = bb.nextTransformId
		const conditionData = bb.conditionData
		//  text.value = "";
		bb.conditionStr = await processVersionContentApi.buildScripts({
			conditionDataList: conditionData
		})
	}
}
defineExpose({
	beforeSaveProcessor
})
</script>


<style scoped>
.pipe:hover {
	border: 1px solid rgb(161, 186, 227) !important;
}
.pipeHover {
	border: 1px solid rgb(161, 186, 227) !important;
}
</style>
